import WebPlayer from '../components/WebPlayer'
import example from '../examples/view'


`View`s are the most basic building block of React Native apps, much like how `div`s are the most basic building block of websites. In terms of implementation, `View` is an abstraction layer on top of the target platform's native equivalent, whether that's `UIView`, `android.view`, `<div>`, or something else.

`View`s are primarily used for styling and layout of children elements. Let's look at a few of the styles we can apply to views. The example below contains two `View`s: the outer view which specifies the alignment of the content contained within, and the inner view which draws a blue square.

<WebPlayer {...example} />

Below you can find the most common styles. Feel free to experiment with them in the example code.

# Layout Styles

| Property         | Type     | Description                                                                                                                                                                                                                                                                                               |
| ---------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `flex`           | `number` | What proportion of the available space should this element expand to fill? 0 means the element doesn't expand.                                                                                                                                                                                            |
| `flexDirection`  | `string` | Do you want a vertical (`column`) or horizontal (`row`) layout? This choice determines the orientation of the <b>primary axis</b> of your layout. One of: `row, column`.                                                                                                                                  |
| `justifyContent` | `string` | How should the content be distributed along the <b>primary axis</b> of your layout? Should it be at the start, the center, the end, or spaced evenly? One of: `flex-start, center, flex-end, space-around, space-between`.                                                                                |
| `alignItems`     | `string` | How should the content be aligned along the <b>secondary axis</b> of your layout? (If the primary axis is `row`, then the secondary axis is `column`, and vice versa) Should content be aligned at the start, the center, the end, or stretched to fill? One of: `flex-start, center, flex-end, stretch`. |
| `width`          | `number` | A fixed width                                                                                                                                                                                                                                                                                             |
| `height`         | `number` | A fixed height                                                                                                                                                                                                                                                                                            |
| `margin`         | `number` | How much space should separate this element from other adjacent elements? For more granular control, use the properties: `marginTop, marginBottom, marginLeft, marginRight`.                                                                                                                              |
| `padding`        | `number` | How much padding should be within this element before its children are shown? For more granular control, use the properties: `paddingTop, paddingBottom, paddingLeft, paddingRight`.                                                                                                                      |

# Visual Styles

| Property          | Type     | Description                                                                                                                                     |
| ----------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| `backgroundColor` | `string` | The background color                                                                                                                            |
| `borderWidth`     | `number` | The border width. For more granular control, use the properties: `borderTopWidth, borderBottomWidth, borderLeftWidth, borderRightWidth`.        |
| `borderColor`     | `string` | The color of the border. For more granular control, use the properties: `borderTopColor, borderBottomColor, borderLeftColor, borderRightColor`. |
| `borderRadius`    | `number` | Rounded edges                                                                                                                                   |
| `opacity`         | `number` | How transparent should this element be? 0 means fully transparent, 1 means fully opaque.                                                        |
